<template>
  <div class="app-container">
    <!-- 婚礼预约 -->
    <reservation-list-container
      :searchItems="searchItems"
      :actionButtons="actionButtons"
      :tableData="tableData"
      :columns="columns"
      :loading="loading"
      :operationButtons="operationButtons"
      :total="1000"
      :showResetButton="false"
      @search="handleSearch"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @sort-change="handleSortChange"
    >
      <template #weddingForm="{ row }">
        <span>{{ row.weddingForm }}</span>
      </template>
      <template #status="{ row }">
        {{ row.status === 0 ? "未开始" : row.status === 1 ? "已完成" : "进入直播间" }}
      </template>
    </reservation-list-container>
    <Add ref="addRef" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import Add from "./components/Add.vue";
import ReservationListContainer from "@/components/PageTable/ReservationList.vue";

// 搜索项配置
const searchItems = [
  {
    label: "状态",
    prop: "status",
    component: "el-select",
    props: {
      options: [
        { label: "全部", value: null },
        { label: "未开始", value: 0 },
        { label: "已完成", value: 1 },
        { label: "进入直播间", value: 2 },
      ],
    },
    defaultValue: null,
  },
  {
    label: "名称",
    prop: "name",
    component: "el-input",
    props: {
      placeholder: "请输入名称",
    },
  },
  {
    label: "日期",
    prop: "date",
    component: "el-date-picker",
    props: {
      placeholder: "请输入名称",
    },
  },
];

// 操作按钮配置
const actionButtons = [
  {
    text: "新增预约",
    handler: () => {
      addRef.value.show();
    },
    type: "primary" as "primary",
    icon: undefined,
    loading: false,
  },
];

// 表格列配置
const columns = [
  {
    prop: "name",
    label: "婚礼名称",
  },
  {
    prop: "time",
    label: "婚礼开始时间",
  },
  {
    prop: "time",
    label: "接单时间时间",
  },
  {
    label: "婚礼形式",
    slot: "weddingForm",
  },
  {
    label: "状态",
    slot: "status",
  },
];

// 表格数据
const tableData = ref([
  {
    index: 1,
    status: 1,
    name: "名称",
    singer: "杨坤",
    weddingForm: "中式",
    time: "2025-02-18 15:00:00",
  },
]);

// 操作列按钮配置
const operationButtons = [
  {
    text: "取消",
    handler: (row: any) => {
      console.log("取消操作", row);
    },
    // icon: undefined,
    loading: () => false,
  },
  {
    text: "详情",
    handler: (row: any) => {
      console.log("详情操作", row);
    },
    type: "info" as "info",
    icon: null,
  },
];

const loading = ref(false);
const addRef = ref();

// 搜索方法
const handleSearch = (searchData: any) => {
  console.log("搜索操作", searchData);
};

// 分页大小变化方法
const handleSizeChange = (size: any) => {
  console.log("分页大小变化", size);
};

// 当前页变化方法
const handleCurrentChange = (page: any) => {
  console.log("当前页变化", page);
};

// 排序变化方法
const handleSortChange = (sortInfo: any) => {
  console.log("排序变化", sortInfo);
};
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
}
</style>
